.modal {
  &-backdrop {
    @apply bg-background/80 fixed inset-0 z-50 backdrop-blur-sm;
  }

  &-content {
    @apply bg-background border-border fixed left-[50%] top-[50%] z-50 grid max-h-[calc(100%-48px)] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto border p-4 shadow-lg duration-200 sm:rounded-lg md:w-full;
  }

  &-close {
    @apply absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none;
    > svg {
      @apply text-muted-foreground;
    }
  }

  &-header {
    @apply flex flex-col space-y-1.5 text-center sm:text-left;
  }

  &-footer {
    @apply flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2;
  }

  &-title {
    @apply text-lg font-semibold leading-none tracking-tight;
  }

  &-description {
    @apply text-muted-foreground text-sm;
  }
}
